<!--
 * @Author: ShaXin
 * @Date: 2022-01-06 14:08:56
 * @LastEditors: jgg
 * @LastEditTime: 2022-03-02 16:43:02
-->
<template>
    <div class="warp">
        <div style="height:20px"></div>
        <div class="right_center_card">
            <div v-for="(item, index) in cardData" :key="index" :class="item.class" @click="queryDeptTree(index+'')">
                <div class="card_left"> 
                    <div class="card_left_name">{{item.title}}</div>
                    <div class="card_left_detail">{{cardDataNum != null ?cardDataNum[item.prop]:'--'}}</div>
                </div>
                <div class="card_right">
                        <el-image
                    :src="item.url"
                    fit="fit"/>
                </div>
            </div>
        </div>
        <div class="title">
            <div style="height:20px"></div>
            <div class="titleV">{{titleName?titleName:''}}</div>
        </div>
        <div class="contentV">
            <div class="content_left">
                <el-input placeholder="请输入关键词搜索" prefix-icon="el-icon-search" v-model="filterText"> </el-input>
                <el-tree
                    ref="tree"
                    v-loading="treeLoading"
                    :data="data"
                    node-key="code"
                    @node-click="handleNodeClick"
                    highlight-current
                    :default-expanded-keys="defaultExpandedKeys"
                    
                    :filter-node-method="filterNode"
                    :props="defaultProps">
                </el-tree>

            </div>
            <div class="content_right">
                <div class="right_serch">
                    <span style="color:#333333;font-size: 14px;">日期：</span>
                    <el-date-picker @change="getData()" v-model="monitorTime" type="date" placeholder="选择日期"> </el-date-picker>
                    <div class="example">
                        <div></div>
                    </div>
                </div>
                <div class="shili">
                    <div class="shiliP" style="margin-left: 0px; background-color: #00CD27;"></div>
                    <div class="shiliLabei" style="margin-left: 5px;">正常</div>
                    <div class="shiliP" style="margin-left: 30px; background-color: #F78B00;"></div>
                    <div class="shiliLabei" style="margin-left: 5px;">异常</div>
                    <div class="shiliP" style="margin-left: 30px; background-color: #FF0A0B;"></div>
                    <div class="shiliLabei" style="margin-left: 5px;">故障</div>
                    <div class="shiliP" style="margin-left: 30px; background-color: #656565;"></div>
                    <div class="shiliLabei" style="margin-left: 5px;">未到报</div>
                </div>
            
                <!-- 
                <div class="right_center">
                    <div class="title" style="height:40px">
                        <div style="height:10px"></div>
                        <div class="titleV" style="font-size: 17px;">实时监测设备</div>
                    </div>
                    
                </div> -->
                <div class="right_bottom">
                    <div class="title" style="height:50px">
                        <div style="height:15px"></div>
                        <div class="titleV" style="font-size: 17px;">设备运行状况</div>
                    </div>
                    <div class="tableBox">
                        <el-table
                            :data="tableData"
                            border
                            v-loading="mixinLoading"
                            height="100%"
                            style="width: 100%">
                            <el-table-column  prop="sensorName" label="传感器名称"  align='center'></el-table-column>
                            <el-table-column v-for="(item, index) in column" :key="index"
                                :prop="item.prop"
                                :label="item.label?item.label:''"
                                :width="item.width"
                                :align="item.align?item.align:'center'"
                                >
                             <template #default="scope">
                                 <el-popover
                                    placement="left"
                                    title="详情"
                                    width="auto"
                                    trigger="click"
                                    content=""
                                >
                                    <template #reference>
                                        <div class="pointClass" @click="monitorInfoDetail(scope.row,item.prop)" :style="scope.row[item.prop]==1?'background-color: #00CD27;'
                                                                    :scope.row[item.prop]==2?'background-color: #F78B00;'
                                                                    :scope.row[item.prop]==3?'background-color: #FF0A0B;'
                                                                    :'background-color: #656565;'"></div>
                                    </template>
                                    <div v-if="pointInfo&&sensorType=='01'" style="width: 150px;">
                                        <div><span>温度：{{pointInfo.temp}}℃</span></div>
                                        <div><span>湿度：{{pointInfo.rhu}}%</span></div>
                                        <div><span>气压：{{pointInfo.p}}kPa</span></div>
                                    </div>
                                    <div v-if="pointInfo&&sensorType=='02'" style="width: 150px;">
                                        <div><span>水位：{{pointInfo.z}}m</span></div>
                                    </div>
                                    <div v-if="pointInfo&&sensorType=='03'" style="width: 150px;">
                                        <div><span>雨量：{{pointInfo.r}}mm</span></div>
                                    </div>
                                    <div v-if="pointInfo&&sensorType=='04'" style="width: 150px;">
                                        <div><span>风力：{{pointInfo.fxGrade}}</span></div>
                                        <div><span>风向：{{pointInfo.fx}}</span></div>
                                    </div>
                                    <div v-loading="imgLoading" v-if="pointInfo&&sensorType=='05'" style="width: 440px;height: 330px;">
                                        <el-image
                                            v-if="sensorType=='05'"
                                            :error="imgLoading=false"
                                            :load="imgLoading=false"
                                            style="width: 100%; height: 100%"
                                            :src="`data:image/png;base64,${pointInfo}`"
                                            fit="fit"/>
                                    
                                    </div>
                                    <div v-if="pointInfo&&sensorType=='06'" style="width: 150px;">
                                        <div><span>温度：{{pointInfo.temp}}℃</span></div>
                                        <div><span>压力{{pointInfo.pressure}}kPa</span></div>
                                    </div>
                                    <div v-loading="imgLoading" v-if="pointInfo&&sensorType=='10'"  style="width: 440px;height: 330px;">
                                        <el-image
                                            v-if="pointInfo.length>0"
                                            :error="imgLoading=false"
                                            :load="imgLoading=false"
                                            style="width: 100%; height: 100%"
                                            :src="'data:image/jpeg;base64,'+pointInfo"
                                            fit="fit">
                                        
                                        </el-image>
                                        <!-- <img style="width: 100%; height: 100%" :src="'data:image/jpeg;base64,'+pointInfo" fit="fit" /> -->
                                    
                                    </div>
                                    <div v-if="!pointInfo&&(sensorType=='01'||sensorType=='02'||sensorType=='03'||sensorType=='04')">
                                        无数据
                                    </div>
                                    <div v-if="!pointInfo&&(sensorType=='10'||sensorType=='05')" style="width: 440px;height: 330px;">
                                        无数据
                                    </div>
                                </el-popover>

                                 
                            </template>
                            
                            </el-table-column>
                        </el-table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
import commonApi from '@/api/index'
import abcApi from '@/api/abc'
import {formatTimestamp} from '@/utils/common'
import { Url } from '@/api/url'

export default {
    name: 'index',
    components: {
    },
    data() {
        return {
            Url,
            filterText:'',
            titleName:null,
            monitorTime:new Date(),
            stationIid:'',
            column:[],
            treeLoading:false,
            mixinLoading:false,
            data: [],
            defaultExpandedKeys:[],//默认展开
            defaultExpandedKeys02:'',
            defaultProps: {
                children: 'accountFanslist',
                label: 'name',
                
            },
            tableData:[],
            cardData:[
                {class:'bg1',title:'总水库数',url:require('../../assets/img/dashboard/sbzs.png'),prop:'sum'},
                {class:'bg2',title:'正常设备数',url:require('../../assets/img/dashboard/sbzs.png'),prop:'normal'},
                {class:'bg3',title:'异常设备数',url:require('../../assets/img/dashboard/sbzs.png'),prop:'anomalouts'},
                {class:'bg4',title:'故障设备数',url:require('../../assets/img/dashboard/sbzs.png'),prop:'warns'},
            ],
            cardDataNum:{},
            pointInfo:'',
            sensorType:'',
            imgLoading:false,
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        },
    },
    created() {
        this.queryDeptTree('0');
        this.setColumn();
    },
    mounted() {
        this.findByEquit();
    },
    methods: {
        setColumn(){
            let arr=[];
            for (let index = 0; index < 24; index++) {
                let dict={
                    prop:'status'+index,
                    label:index+'时',
                    width:50
                }
                arr.push(dict);
            }
            this.column=arr;
        },
        findByEquit(){
            abcApi.findByEquit({})
            .then(res => {
                this.cardDataNum=res.data;
                
            })
            .catch(() => {
            })
        },
        getData(){
            let monitorTimeStr=formatTimestamp(this.monitorTime,'yyyy-MM-dd');
            this.mixinLoading = true
            abcApi.monitorInfo({
                monitorTime:monitorTimeStr,
                stationId:this.stationIid
            })
            .then(res => {
                this.mixinLoading = false
                this.tableData=res.data;
                
            })
            .catch(() => {
                this.mixinLoading = false
            })
        },
        monitorInfoDetail(item,prop){
            let hours=prop.substring(6)
            if (hours.length<2) {
                hours='0'+hours
            }

            this.sensorType=item.sensorType;
            
            let monitorTimeStr=formatTimestamp(this.monitorTime,'yyyy-MM-dd');
            this.pointInfo={};
            // if (item.sensorType=='10') {
                
                // abcApi.cameraDetail({
                //     hours:hours,
                //     monitorTime:monitorTimeStr,
                //     stationId:this.stationIid,
                //     sensorCode:item.sensorCode,
                //     sensorType:item.sensorType,
                // })
                // .then(res => {
                //     // let url='data:image/jpeg;base64,'+res.data;
                //     // this.pointInfo= require(url);
                //      this.pointInfo= res.data;
                    
                // })
                // .catch(() => {
                //     this.pointInfo='';
                // })
            // }
            // else{
                if (item.sensorType=='05'||item.sensorType=='10') {
                        this.imgLoading=true;
                }

                abcApi.monitorInfoDetail({
                    hours:hours,
                    monitorTime:monitorTimeStr,
                    stationId:this.stationIid,
                    sensorCode:item.sensorCode,
                    sensorType:item.sensorType,
                })
                .then(res => {
                    this.pointInfo=res.data;
                })
                .catch(() => {
                    this.pointInfo='';
                    this.imgLoading=false;
                })
            // }
            

            
        },

        queryDeptTree(type) {
            this.treeLoading = true
            commonApi.findByEqLists(type).then(res => {
                this.treeLoading = false
                this.tableData=[];
                this.data =[];
                if (res.data&&res.data.length>0) {
                    this.setName(res.data)
                    
                    this.data = res.data
                    
                }
                else{
                    this.titleName=null;
                }
                
                
            }).catch(err=>{
                this.treeLoading = false
            })
        },
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        handleNodeClick(data) {
             if(data.stationId){
                this.stationIid = data.stationId
                this.titleName = `${data.province}${data.city}${data.country}${data.reservoirName}`
                this.getData();
            }
        },
        setName(datas){ //遍历树  获取id数组
            
            for(var i in datas){
                if(datas[i].accountFanslist){  //存在子节点就递归
                    this.setName(datas[i].accountFanslist);
                }else {
                    if(datas[i].lists){
                        datas[i].lists.map(item=>{
                            item.name = item.reservoirName
                            item.code = item.stationId
                        })
                        // if(this.titleName == null){
                            this.stationIid = datas[i].lists[0].stationId
                            this.defaultExpandedKeys = [ datas[i].lists[0].code]
                            // this.defaultExpandedKeys02=datas[i].lists[0].code.toString();
                            this.titleName = `${datas[i].lists[0].province||''}${datas[i].lists[0].city||''}${datas[i].lists[0].country||''}${datas[i].lists[0].reservoirName||''}`
                            this.getData();
                        // }
                        datas[i].accountFanslist = datas[i].lists
                    }
                }
            }
        },
    }
}
</script>
<style lang='scss' scoped>
.warp{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 0px rgba(214, 214, 214, 0.25);
    border-radius: 6px;
    
}
.title{
    height: 60px;
    .titleV{
        height: 20px;
        line-height: 20px;
        margin-left: 20px;
        padding-left: 10px;
        border-left: 4px solid #0AAFF5 ;
        font-size: 20px;
    }
}
.contentV{
    
    height: calc(100% - 200px);
    padding: 0px 20px 20px 20px;
    display: flex;
    justify-content:space-between;
}
.content_left{
    width: 200px;
    height: calc(100% - 20px);
    border-radius: 10px;
    border: 1px solid #E4E4E4;
    padding: 10px;
    overflow-y: auto;
}
.content_right{
    width: calc(100% - 240px);
    position: relative;
    .shili{
        position: absolute;
        height: 34px;
        left: 300px;
        top: 0px;
        display: flex;
        .shiliLabei{
            line-height: 34px;
        }
        .shiliP{
            width: 16px;
            height: 16px;
            margin-top: 9px;
            border-radius: 8px;
        }
    }
    .right_serch{
        height: 32px;
        line-height: 32px;
    }
    .right_center{
        height: 210px;
        border-radius: 10px;
        border: 1px solid #E4E4E4;
        margin-top: 15px;
        
    }
    .right_bottom{
        height: calc(100% - 50px);
        border-radius: 10px;
        border: 1px solid #E4E4E4;
        margin-top: 16px;
        .tableBox{
            height: calc(100% - 60px);
            margin: 0px 20px;
        }
    }
} 
.right_center_card{
    height: 100px;
    margin: 0px 20px;
    display: flex;
    // justify-content:space-between;
    >div{
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .bg1{
        width: 280px;
        margin-right: 30px;
        // background: linear-gradient(0deg, #22A5BD, #37D6C1);
        background-color: #0096FF;
        border-radius: 6px;
    }
    .bg2{
        width: 280px;
        margin-right: 30px;
        // background: linear-gradient(0deg, #22BD84, #37D69C);
        background-color: #26C345;
        border-radius: 6px;
    }
    .bg3{
        width: 280px;
        margin-right: 30px;
        // background: linear-gradient(0deg, #49B0F8, #2B98EC);
        background-color: #FFAA00;
        border-radius: 6px;
    }
    .bg4{
        width: 280px;
        margin-right: 30px;
        // background: linear-gradient(0deg, #22A5BD, #37D6C1);
        background-color: #FF4040;
        border-radius: 6px;
    }
    .card_left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding-left: 20px;
            .card_left_name {
                line-height: 18px;
                color: #FFFFFF;
                font-size: 16px;
                margin-bottom: 25px;
                margin-top: 10px;
            }
            .card_left_detail {
                font-size: 28px;
                font-weight: bold;
                color: #FFFFFF;
            }
    }
    .card_right {
        padding-right: 15px;
    }
}
.pointClass{

    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin: auto;
    cursor: pointer;
}

::v-deep .el-table .cell{
    padding: 0px !important;
}
</style>